<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <meta http-equiv="x-ua-compatible" content="IE=7,9,10,edge" >
    <!--[if lt IE9]> 
        <script src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <![endif]-->
    <!--[if lte IE 8]> 
        <noscript>
             <style>.html5-wrappers{display:none!important;}</style>
             <div class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
             </div>
        </noscript>
    <![endif]-->
    <!--[if IE]> 
       <style>
            .boot_1_tittle{
                top:-0.38em;
                margin-top:-10px;
            }
        </style> 
    <![endif]-->

</head>
<body>
   <aside class="menu" id="menuf">
        <div class="boot_1" id="ofys">
            <div class="boot_1_menu" id="menu_bars">
                <a href="javascript:;"><i id="menubars" class="fa fa-bars" aria-hidden="true"></i></a>
            </div>
            <header class="boot_1_tittle" id="boot2t">
                <a href="#"><h1>FU-Blog</h1></a>
            </header>
            <div class="boot_1_head" id="miniimg">
                <a href="#"><img src="./img/head.jpg" alt="FU-BLOG"></a>
            </div>
        </div><!--最小形态-->
        
        <div class="boot_2" id="ofym">
            <div class="boot_1_head boot_2_head">
                <a href="#"><img src="./img/head.jpg" alt="FU-BLOG"></a>
            </div>
            <nav class="icons">
                <ul>
                    <li>
            <a href="./arcticle/home.html" target="ac1">
                <i class="fa fa-home icon_set" aria-hidden="true"></i>
                <!--<span class="frame_showhide">主页</span>-->
            </a>
        </li>
                    <li>
            <a href="./arcticle/archives.html" target="ac1">
                <i class="fa fa-archive icon_set" aria-hidden="true"></i>
                <!--<span class="frame_showhide">归档</span>-->
            </a>
        </li>
                    <li>
            <a href="./arcticle/links.html" target="ac1">
                <i class="fa fa-link icon_set" aria-hidden="true"></i>
                <!--<span class="frame_showhide">链接</span>-->
            </a>
        </li>
                    <li>
            <a href="./arcticle/tags.html" target="ac1">
                <i class="fa fa-tags icon_set" aria-hidden="true"></i>
                <!--<span class="frame_showhide">标签</span>-->
            </a>
        </li>
                    <li>
            <a href="./arcticle/about.html" target="ac1">
                <i class="fa fa-user icon_set" aria-hidden="true"></i>
                <!--<span class="frame_showhide">关于</span>-->
            </a>
        </li>
                    <li>
            <a href="https://www.github.com" target="_blank">
                <i class="fa fa-github icon_set" aria-hidden="true"></i>
                <!--<span>Github</span>-->
            </a>
        </li>
                    <li>
            <a href="https://www.twitter.com" target="_blank">
                <i class="fa fa-twitter icon_set" aria-hidden="true"></i>
                <!--<span>Twitter</span>-->
            </a>
        </li>
                    <li>
            <a href="./arcticle/rss.html" target="ac1">
                <i class="fa fa-rss icon_set" aria-hidden="true"></i>
                <!--<span>Rss</span>-->
            </a>
        </li>
                    <li>
            <a href="./arcticle/search.html" target="ac1">
                <i class="fa fa-search icon_set" aria-hidden="true"></i>
                <!--<span>Search</span>-->
            </a>
        </li>
                </ul>
            </nav>
        </div><!--中间形态-->
        
        <div class="boot_3" id="ofyb">
            <div class="boot_1_head boot_3_head">
                <a href="#"><img src="./img/head.jpg" alt="FU-BLOG"></a>
            </div>
            <header class="boot_2_tittle">
                <a href="#"><h1>FU-Blog</h1></a>
            </header>
            <nav class="icons1">
                <ul>
                    <li class="icon_conlis">
            <a href="./arcticle/home.html" target="ac1">
                <i class="fa fa-home icon_set" aria-hidden="true"></i>
                <span class="frame_showhide">主页</span>
            </a>
        </li>
                    <li class="icon_conlis">
            <a href="./arcticle/archives.html" target="ac1">
                <i class="fa fa-archive icon_set" aria-hidden="true"></i>
                <span class="frame_showhide">归档</span>
            </a>
        </li>
                    <li class="icon_conlis">
            <a href="./arcticle/links.html" target="ac1">
                <i class="fa fa-link icon_set" aria-hidden="true"></i>
                <span class="frame_showhide">链接</span>
            </a>
        </li>
                    <li class="icon_conlis">
            <a href="./arcticle/tags.html" target="ac1">
                <i class="fa fa-tags icon_set" aria-hidden="true"></i>
                <span class="frame_showhide">标签</span>
            </a>
        </li>
                    <li class="icon_conlis">
            <a href="./arcticle/about.html" target="ac1">
                <i class="fa fa-user icon_set" aria-hidden="true"></i>
                <span class="frame_showhide">关于</span>
            </a>
        </li>
                    <li class="icon_conli">
            <a href="https://www.github.com" target="_blank">
                <i class="fa fa-github icon_set icon_con" aria-hidden="true"></i>
                <!--<span>Github</span>-->
            </a>
        </li>
                    <li class="icon_conli">
            <a href="https://www.twitter.com" target="_blank">
                <i class="fa fa-twitter icon_set icon_con" aria-hidden="true"></i>
                <!--<span>Twitter</span>-->
            </a>
        </li>
                    <li class="icon_conli">
            <a href="./arcticle/rss.html" target="ac1">
                <i class="fa fa-rss icon_set icon_con" aria-hidden="true"></i>
                <!--<span>Rss</span>-->
            </a>
        </li>
                    <li class="icon_conli">
            <a href="./arcticle/search.html" target="ac1">
                <i class="fa fa-search icon_set icon_con" aria-hidden="true"></i>
                <!--<span>Search</span>-->
            </a>
        </li>
                </ul>
            </nav>
        </div><!--最大形态-->
        
        <div class="boot_4" id="ofyb1">
            <div class="boot_1_head boot_3_head">
                <a href="#"><img src="./img/head.jpg" alt="FU-BLOG"></a>
            </div>
            <!--<header class="boot_2_tittle">
                <a href="#"><h1>FU-Blog</h1></a>
            </header>-->
            <nav class="icons1">
                <ul>
                    <li class="icon_conlis">
            <a href="./arcticle/home.html" target="ac1">
                <i class="fa fa-home icon_set" aria-hidden="true"></i>
                <span class="frame_showhide">主页</span>
            </a>
        </li>
                    <li class="icon_conlis">
            <a href="./arcticle/archives.html" target="ac1">
                <i class="fa fa-archive icon_set" aria-hidden="true"></i>
                <span class="frame_showhide">归档</span>
            </a>
        </li>
                    <li class="icon_conlis">
            <a href="./arcticle/links.html" target="ac1">
                <i class="fa fa-link icon_set" aria-hidden="true"></i>
                <span class="frame_showhide">链接</span>
            </a>
        </li>
                    <li class="icon_conlis">
            <a href="./arcticle/tags.html" target="ac1">
                <i class="fa fa-tags icon_set" aria-hidden="true"></i>
                <span class="frame_showhide">标签</span>
            </a>
        </li>
                    <li class="icon_conlis">
            <a href="./arcticle/about.html" target="ac1">
                <i class="fa fa-user icon_set" aria-hidden="true"></i>
                <span class="frame_showhide">关于</span>
            </a>
        </li>
                    <li class="icon_conli">
            <a href="https://www.github.com" target="_blank">
                <i class="fa fa-github icon_set icon_con" aria-hidden="true"></i>
                <!--<span>Github</span>-->
            </a>
        </li>
                    <li class="icon_conli">
            <a href="https://www.twitter.com" target="_blank">
                <i class="fa fa-twitter icon_set icon_con" aria-hidden="true"></i>
                <!--<span>Twitter</span>-->
            </a>
        </li>
                    <li class="icon_conli">
            <a href="./arcticle/rss.html" target="ac1">
                <i class="fa fa-rss icon_set icon_con" aria-hidden="true"></i>
                <!--<span>Rss</span>-->
            </a>
        </li>
                    <li class="icon_conli">
            <a href="./arcticle/search.html" target="ac1">
                <i class="fa fa-search icon_set icon_con" aria-hidden="true"></i>
                <!--<span>Search</span>-->
            </a>
        </li>
                </ul>
            </nav>
        </div><!--最小弹出导航-->
    </aside>
    <iframe src="./arcticle/home.html" frameborder="0" class="framed" id="cont2" name="ac1"></iframe>
<div id="but"></div>
</body>
<script type="text/javascript">
        //var times;
        var x = document.getElementById('menu_bars');//按钮
        var a = document.getElementById('ofyb1');//最大导航（4）
        var b = document.getElementById('ofym');//中等导航（2）
        var c = document.getElementById('ofys');//最小导航（1）
        var t = document.getElementById('boot2t');//最小标题
        var bars = document.getElementById('menubars');//菜单图标
        var frames = document.getElementById('cont2');//内容框架
        //var menus = document.getElementById('menuf');//菜单总框架
        var mining = document.getElementById('miniimg');//最小头像
        var shad = document.getElementById('but');//遮罩阴影
        function open(){
            a.style.display = 'block';
            t.style.display = 'none';
            frames.style.left = "300px";
            bars.className = 'fa fa-times';
            mining.style.display = 'none';
            shad.style.display = 'block';
            c.style.width = '300px';
            a.style.height = '710px';
        }

        function close(){
            
            t.style.display = 'block';
            frames.style.left = "0px";
            bars.className = 'fa fa-bars';
            mining.style.display = 'block';
            c.style.width = '100%';
            shad.style.display = 'none';
            a.style.height = '100%';
            a.style.display = 'none';
            /*if(b.style.display == 'none' && c.style.display == 'none'){
                a.style.display = 'block';
            }else{
                a.style.display = 'none';
            }*/
        }

        function pressdown(){

            if(bars.className == 'fa fa-bars'){
                open();
            }else if(bars.className == 'fa fa-times'){
                close();
            }
            
        }
        
        window.onresize = function () {
            close();
     
        }

        x.onmousedown = pressdown;
        shad.onmousedown = close;
    </script>
</html>